<!-- eslint-disable vuejs-accessibility/form-control-has-label -->
<template>
      <div class="container">
  <form class="login-form">
    <h2>登 录</h2>
    <input
      type="text"
      v-model="username"
      placeholder="用户名"
    />
    <input
      type="password"
      v-model="password"
      placeholder="密码"
    />
    <button @click="onlogin">登录</button>
  </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import { Login } from '@/api/http';

const store = useStore();
const router = useRouter();
const username = ref('');
const password = ref('');
// 管理员页面数据
const aminsdata = ref([
  { path: '/user', name: '用户管理', parent: [{ name: '用户列表', path: '/userList' }, { name: '用户统计', path: '/userChart' }] },
  { path: '/film', name: '电影管理' },
  { path: '/cinema', name: '影院管理' },
  { path: '/auditorium', name: '影厅管理' },
  { path: '/movie', name: '电影排片' },
  { path: '/comment', name: '评论管理' },
  { path: '/order', name: '订单管理' },
  { path: '/limits', name: '权限管理' },
  { path: '/carousel', name: '轮播图管理' },
]);

// 普通用户页面数据
const datas = ref([
  { path: '/user', name: '用户管理', parent: [{ name: '用户列表', path: '/userList' }, { name: '用户统计', path: '/userChart' }] },
  { path: '/film', name: '电影管理' },
  { path: '/cinema', name: '影院管理' },
  { path: '/auditorium', name: '影厅管理' },
  { path: '/movie', name: '电影排片' },
]);

// eslint-disable-next-line @typescript-eslint/no-empty-function
const ordinary = () => {
  // console.log('111');
  store.commit('setPagedata', datas.value);
  router.replace('/');
};
const administrators = () => {
  // console.log('222');
  store.commit('setPagedata', aminsdata.value);
  router.replace('/');
};
// 登录添加token
const Storage = (val : any) => {
  localStorage.setItem('token', 'ok');
  localStorage.setItem('user', JSON.stringify(val));
};
// eslint-disable-next-line consistent-return
const onlogin = async () => {
  console.log(username.value, password.value);
  if (username.value === '' || password.value === '') return ElMessage({ message: '请输入账号或密码', type: 'error' });
  const { data } = await Login({
    username: username.value.toString(), password: password.value.toString(),
  });
  if (!data.length) return ElMessage({ message: '账号或密码错误', type: 'error' });
  if (data[0].limits === '管理员') {
    administrators();
    Storage(data);
  } else {
    ordinary();
    Storage(data);
  }
};
</script>

<style scoped>
.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("https://starry-lixu.oss-cn-hangzhou.aliyuncs.com/202209141908599.jpg") fixed no-repeat;
    background-size: cover;
}
.login-form {
    width: 240px;
    height: 220px;
    display: flex;
    flex-direction: column;
    padding: 40px;
    text-align: center;
    position: relative;
    z-index: 100;
    background: inherit;
    border-radius: 18px;
    overflow: hidden; /* 隐藏多余的模糊效果*/
}
  .login-form h2 {
   font-size: 18px;
   font-weight: 400;
   color: #3d5245;
  }

  .login-form input,
  .login-form button {
   margin: 6px 0;
   height: 36px;
   border: none;
   background-color: rgba(255, 255, 255, 0.3);
   border-radius: 4px;
   padding: 0 14px;
   color: #3d5245;
  }
</style>
